import React, { useState } from 'react';
import memo from '../common/wrapMemo';
import style from './ExportModal.module.scss';
import { CloseOutlined } from '@ant-design/icons';
import { Button, Space, Radio } from 'antd';
import Loading from '../common/Loading';

const ExportModal = memo((props) => {
    const { onClose, disabled, exportData, loading } = props;
    const [exportType, setExportType] = useState('');
    // const [exportSuccess, setExportSuccess] = useState(false);

    return (
        <>
            <div className={style.exportModal}>
                <div className={style.head}>
                    <span>{loading ? '导出中' : '请选择要导出的格式'}</span>
                    <CloseOutlined onClick={onClose} className={style.close} />
                </div>
                {loading ? (
                    <Loading text="导出中..." style={{ height: '100px', minHeight: '100px' }} />
                ) : (
                    <div className={style.content}>
                        <Radio.Group
                            className={style.radioGroup}
                            onChange={(e) => setExportType(e.target.value)}
                            value={exportType}
                        >
                            <Space direction="vertical">
                                <Radio value={'shp'}>shp文件导出</Radio>
                                <Radio value={'xls'}>Excel文件导出</Radio>
                            </Space>
                        </Radio.Group>
                        <Button
                            disabled={!exportType || disabled}
                            className={style.passBtn}
                            onClick={() => exportData({ exportType })}
                        >
                            确认
                        </Button>
                    </div>
                )}
            </div>
            <div className={style.mask}></div>
        </>
    );
});

export default ExportModal;
